<template>
  <el-container>
    <el-header style="height: auto;border-bottom:1px solid #000000;">
      <div style="margin-top: 5px;">
        <div style="float: left;">
          <el-select v-model="currentGroup" placeholder="请选择文件组">
            <el-option v-for="(setting, i) in settings" :key="setting.group" :label="setting.group" :value="setting.group"></el-option>
          </el-select>
        </div>
        <div style="margin-left: 200px;">
          <el-input placeholder="请输入目录路径" v-model="currentPath">
            <el-button slot="prepend" type="primary" title="返回根目录" icon="el-icon-s-home" @click="goHome"></el-button>
            <el-button slot="prepend" type="primary" title="刷新" icon="el-icon-refresh" @click="refresh"></el-button>
            <el-button slot="prepend" type="primary" title="返回上层" icon="el-icon-top" @click="toSuper"></el-button>
            <el-button slot="append" type="primary" title="打开" icon="el-icon-right" @click="enter()"></el-button>
          </el-input>
        </div>
      </div>
      <div style="margin-top: 5px; margin-bottom: 5px;">
        <el-button-group>

          <el-popover placement="bottom" trigger="click" v-model="showCreateFolder">
            <el-input placeholder="请输入子目录名称" v-model="newName">
              <el-button slot="append" type="primary" icon="el-icon-check" @click="createFolder"></el-button>
            </el-input>
            <el-button slot="reference" type="primary" icon="el-icon-folder-add" title="新建子目录"></el-button>
          </el-popover>

          <el-popover placement="bottom" trigger="click" v-model="showRename">
            <el-input placeholder="请输入目录名称" v-model="newName">
              <el-button slot="append" type="primary" icon="el-icon-check" @click="renameItem"></el-button>
            </el-input>
            <el-button slot="reference" type="primary" icon="el-icon-edit" title="重命名目录" :disabled="selectedFolder == null && selectedFile == null"></el-button>
          </el-popover>

          <el-popconfirm placement="bottom" :title="removeConfirmText" @confirm="removeItem">
            <el-button type="primary" slot="reference" icon="el-icon-delete" title="删除" :disabled="selectedFolder == null && selectedFile == null"></el-button>
          </el-popconfirm>

          <el-popover placement="bottom" trigger="click" v-model="showUpload">

            <mf-uploader :group="group" :path="path" multiple drag @onSuccess="onSuccess"></mf-uploader>
            <el-button type="primary" slot="reference" icon="el-icon-upload2" title="上传文件"></el-button>
          </el-popover>

          <el-popconfirm placement="bottom" :title="removeConfirmText" @confirm="downloadZip">
            <el-button type="primary" slot="reference" icon="el-icon-download" title="下载" :disabled="selectedFolder == null"></el-button>
          </el-popconfirm>
        </el-button-group>
      </div>
    </el-header>
    <el-main style="padding: 0;">
      <ul class="listView" @click="selectFolder(null);selectFile(null);">
        <li v-for="(childFolder, i) in folders" :key="childFolder.folderId">
          <el-tooltip placement="bottom" effect="light" :open-delay="1000">
            <div slot="content" style="max-width:200px">
              <h6>{{childFolder.folderName}}</h6>
              <div>创建时间：{{childFolder.createTime}}</div>
              <div>修改时间：{{childFolder.updateTime}}</div>
            </div>
            <div :class="(selectedFolder && selectedFolder.folderId == childFolder.folderId) ? 'selected':''" @click.stop="selectFile(null);selectFolder(childFolder)" @dblclick.stop="openFolder(childFolder)">
              <i class="folder fa fa-folder"></i>
              <span>{{childFolder.folderName}}</span>
            </div>
          </el-tooltip>
        </li>
        <li v-for="(item, i) in folder.files" :key="item.fileId">
          <el-tooltip placement="bottom" effect="light" :open-delay="1000">
            <div slot="content" style="max-width:200px">
              <h6>{{item.fileName}}</h6>
              <div>创建时间：{{item.createTime}}</div>
              <div>修改时间：{{item.updateTime}}</div>
              <div>文件大小：{{item.contentLength | cutting }}</div>
              <div>文件类型：{{fileTypes[item.extensionName||'default'].typeName}}</div>
            </div>
            <div :class="(selectedFile && selectedFile.fileId == item.fileId) ? 'selected':''" @click.stop="selectFolder(null);selectFile(item)" @dblclick.stop="openFile(item)">
              <i :class="`file fa ${fileTypes[item.extensionName||'default'].icon}`" :style="{color: fileTypes[item.extensionName||'default'].color}"></i>
              <span>{{item.fileName}}</span>
            </div>
          </el-tooltip>
        </li>
      </ul>
    </el-main>
  </el-container>
</template>
<script>
import {mapState, mapMutations, mapActions} from 'vuex';
const STORE_MODULE = {
  "name": "filesys",
  "state": [
    "fileTypes",
    "group",
    "path",
    "super",
    "folder",
    "folders",
    "selectedFolder",
    "selectedFile",
    "settings",
    "loadUri"
  ],
  "mutations": [
    "initialize",
    "selectFolder",
    "selectFile",
    "setGroup"
  ],
  "actions": [
    "getConfig",
    "query",
    "create",
    "rename",
    "renameFile",
    "delete",
    "deleteFile",
    "move",
    "download"
  ]
};
export default {
  data() {
    return {
      currentPath: '/',
      showCreateFolder: false,
      showRename: false,
      showUpload: false,
      newName: ''
    };
  },
  watch: {
  },
  computed: {
    ...mapState(STORE_MODULE.name, STORE_MODULE.state),
    currentGroup: {
      get(){
        return this.group;
      },
      set(val){
        this.setGroup(val);
        this.enter('/');
      }
    },
    removeConfirmText(){
      let item = this.selectedFolder || this.selectedFile;
      let txt = '请先选择一个文件夹或文件!';
      if (item){
        txt = `确认要删除选定项吗？删除之后将不可恢复，请谨慎操作！`;
      }
      return txt;
    }
  },
  created(){
    this.initialize();
    this.getConfig().then(r => {
      if (r.success)
        this.enter(this.path);
    })
  },
  beforeDestroy(){

  },
  methods: {
    ...mapMutations(STORE_MODULE.name, STORE_MODULE.mutations),
    ...mapActions(STORE_MODULE.name, STORE_MODULE.actions),
    enter(path){
      this.currentPath = path || this.currentPath;
      this.query(this.currentPath);
      this.selectFolder(null);
      this.selectFile(null);
    },
    refresh(){
      this.query(this.currentPath);
    },
    toSuper(){
      if (this.super){
        this.enter(this.super.path);
      }
    },
    goHome(){
      this.enter('/');
    },
    downloadZip(){

    },
    openFolder(folder){
      this.enter(folder.path);
    },
    openFile(file){
      // this.download({fileId: file.fileId, dispositionType: 'inline'});
      window.open(`${this.loadUri}?fileId=${file.fileId}`);
    },
    createFolder() {
      this.create(this.newName).then(r => {
        if (r.success){
          this.showCreateFolder = false;
          this.newName = '';
        }
      });
    },
    renameItem() {
      if (this.selectedFolder){
        this.rename(this.newName).then(r => {
          if (r.success){
            this.showRename = false;
            this.newName = '';
          }
        });
        return;
      }
      if (this.selectedFile){
        this.renameFile(this.newName).then(r => {
          if (r.success){
            this.showRename = false;
            this.newName = '';
          }
        });
        return;
      }
    },
    removeItem(){
      if (this.selectedFolder){

        this.delete(this.selectedFolder.path).then(r => {
          if (r.success)
            this.selectFolder(null);
        });
        return;
      }
      if (this.selectedFile){

        this.deleteFile([this.selectedFile.fileId]).then(r => {
          if (r.success)
            this.selectFile(null);
        });
        return;
      }
    },
    onSuccess(response){
      if (response.success){
        this.refresh();
      }
      this.showUpload = false;
    },
  }
};
</script>
<style scoped>

.buttonItem{
  border: 0;
  margin: 0;
}
.toolbar .buttonItem{
  padding: 5px!important;
}
.listView{
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
}
.listView li{
  display: inline-block;
  width: 100px;
  padding: 10px;
}
.listView li > div{
  padding: 10px;
}

.listView li > div *{
  display: block;
  text-align: center;
}
.listView li > div span{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align:middle;
  font-size: 12px;
}
.listView li > div .fa{
  font-size: 30px;
  padding: 5px;
}
.listView li > .selected{
  background-color: rgb(125, 187, 238);
}
.listView li > .selected span{
  color: #fff;
}

.folder{
  color: rgb(255, 203, 59)!important;
}
.file{
  color: rgb(50, 132, 187);
}
</style>
